<template>
  <div>
    <el-container>
      <el-aside width="240px">
        <!-- <el-tree-select
    v-model="rolevalue"
    :props="defaultProps1"
    :data="tableData"
    :render-after-expand="false"
    style="width: 150px"
    
   @change="getrm()"
  /> -->
        <!-- 角色 -->
        <el-tree-v2 style="max-width: 600px" :data="tableData" :props="defaultProps1" :height="208"
          @node-click="handleNodeClick" />
      </el-aside>
      <el-main>
        <!-- 菜单 -->
        <el-tree ref="deptreeRef" style="max-width: 600px" :data="mtableData" show-checkbox default-expand-all
          node-key="id" highlight-current :props="defaultProps" @check-change="getCheckedNodes" />
      </el-main>
    </el-container>
    <el-button type="primary" @click="add()">保存</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { ElTree } from "element-plus";
import { KongaUrl } from "@/axios/axiosHelp";
//角色Id
const rolevalue = ref();
//菜单Id集合
const menuvalue = ref([]);
//树状属性
const defaultProps1 = {
  children: "children",
  label: "roleName",
  value: "roleId",
};
const form = reactive({
  TotalCount: 0,
  PageCount: 0,
  PageSize: 500,
  PageIndex: 1,
});
//树状属性
const defaultProps = {
  children: "children",
  label: "label",
  id: "id",
};
//树状Ref
const deptreeRef: any = ref([]);
const tableData = ref([]);
//获取角色表
const getrole = () => {
  KongaUrl
    .get("/user/api/Backed/GetRole", {
      params: form,
    })
    .then((res) => {
      tableData.value = res.data.data;
    });
};
//菜单数据变量--获取数据
const mtableData = ref([]);
const getMenu = () => {
  KongaUrl({
    url: "/user/api/Menu/GetMenuTree",
    method: "get",
    params: {
      PId: 0,
    },
  }).then((res) => {
    mtableData.value = res.data.data;
    console.log(menuvalue.value);
  });
};
//添加关系表
const add = () => {
  //先删除
  //   axios({
  //     url: "https://localhost:44372/api/Menu/DeleteRoleMenu",
  //     method: "post",
  //     params: {
  //       RoleId: rolevalue.value,
  //     },
  //   }).then((res) => {
  //     if (res.data.code == 200) {
  //       //ElMessage.success(res.data.msg);
  //     } else {
  //       // ElMessage.error(res.data.msg);
  //       return;
  //     }
  //   });
  //再添加
  axios({
    url: "https://localhost:44372/api/Menu/AddRoleMenu",
    method: "post",
    data: {
      roleId: rolevalue.value,
      menuIds: menuvalue.value,
    },
  }).then((res) => {
    if (res.data.code == 200) {
      if (res.data.code == 200) {
        ElMessage.success(res.data.message);
      } else {
        ElMessage.error(res.data.message);
        return;
      }
    }
  });
};
//菜单树状点击事件
const getCheckedNodes = () => {
  menuvalue.value = deptreeRef.value
    .getCheckedNodes()
    .map((node: any) => node.id);
  console.log(menuvalue.value);
};
//角色树状点击事件
const handleNodeClick = (data: any) => {
  rolevalue.value = data.roleId;
  //菜单树状反填
  axios({
    url: "https://localhost:7103/api/Menu/GetRoleMenu",
    method: "get",
    params: {
      RoleId: rolevalue.value,
    },
  }).then((res) => {
    console.log(rolevalue.value);
    menuvalue.value = res.data.data.map((item: any) => item.menuId);
    deptreeRef.value?.setCheckedKeys(menuvalue.value);
  });
  //console.log(rolevalue.value)
};
// const getrm = () => {
//    axios({
//     url: 'https://localhost:7081/api/User/GetRoleMenu',
//      method: 'get',
//      params: {
//       RoleId:rolevalue.value,
//     }

//    }).then((res) => {
//     console.log(rolevalue.value)
//      menuvalue.value = res.data.data.map((item: any) => item.menuId)
//       deptreeRef.value?.setCheckedKeys(menuvalue.value)

//   })
// }

onMounted(() => {
  getrole();
  getMenu();
});
</script>

<style scoped></style>